<template>
	<view class="text_center h100">

		<!-- 查询列表盒子 -->
		<view :class="
        mobile == 'm' ? 'query_box query_list_m' : 'query_box query_list_pc'
      " v-if="!code">
			<view>
				<view class="text_title"> 查询序列号</view>
			</view>

			<view class="" class="input_class">
				<u-input border-bottom="true" placeholder="请输入序列号" v-model="input" clearable>
				</u-input>
				<image mode="aspectFit" src="../../static/ewm.png" class="scanCode" @click="scanCode">

				</image>
			</view>

			<view class="cxrq_btn" style="margin: 25rpx 0">
				<u-button type="primary" @click="getData_fun()">查询</u-button>
			</view>
		</view>
		<view :class="
        mobile == 'm'
          ? 'query_box query_list_m column_flex_center'
          : 'query_box query_list_pc column_flex_center'
      " v-else>
			<view title="点击以复制激活码" @click="copy_fun()">
				<text id="code" class="code_str font_color">{{ code }}
				</text>
				<u-button type="primary" class="el-icon-document-copy" @click="copy_fun()">复制</u-button>
			</view>
		</view>

		<!-- 获取激活码盒子 -->
		<view class="query_box get_code" v-if="!code">
			<view :class="mobile == 'm' ? 'center_box_m' : 'center_box'" v-if="count.length">
				<ul class="infinite-list">
					<li v-for="(item, index) in count" :class="
                mobile == 'm' ? 'infinite-list-item_m' : 'infinite-list-item_pc'
              " :key="index" @click="getCode_fun(index)">
						{{ item.value }}
					</li>
					<li :class="
                mobile == 'm' ? 'infinite-list-item_m add' : 'infinite-list-item_pc add'
              " @click="setTime()">
						<image mode="aspectFit" src="../../static/add.png" style="width: 100%;height:100rpx">
					</li>
				</ul>
			</view>
			<view class=" center_box" v-else>
				无激活码...
			</view>
		</view>

		<view class="forgot_password_box">
			<view class="forgot_password" @click="forgot_password_fun">
				<u-icon name="setting"></u-icon>设置密码
			</view>
		</view>

		<!-- <uni-section title="WDNMD" type="line"></uni-section> -->
		<uni-datetime-picker ref="databox" type="date" :value="single" :start="date_data.start" :end="date_data.end"
			@change="changeTime">
			<view></view>
		</uni-datetime-picker>
	</view>
</template>

<script>
	// import Qr from '@/tools/wxqrcode.js'
	// import tkiQrcode from "@/node_modules/tki-qrcode/App.vue"
	import tkiQrcode from "tki-qrcode"
	export default {
		data() {
			return {
				input: "",
				// input: "ALA63A2100003",
				count: [],
				code: null,
				timer: null,
				mobile: "m",
				token: '',
				qr: "",
				btn_stats: {},
				date_data: {
					start: '',
					end: '',
					data: ''
				}
			};
		},
		components: {
			tkiQrcode
		},
		created() {
			let nowdate = new Date()
			this.date_data.start = nowdate.getFullYear() + '-' + (nowdate.getMonth() + 1) + '-' + nowdate.getDate()
			this.date_data.end = (nowdate.getFullYear() + 1) + '-' + (nowdate.getMonth() + 1) + '-' + nowdate.getDate()
			console.log(this.date_data)
		},
		methods: {
			//   滚动列表触底事件
			load() {
				//   console.log(11);
			},
			scanCode() {
				uni.scanCode({
					onlyFromCamera: false,
					scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
					success: (res) => {
						console.log(res.result)
						this.input = res.result
					},
					fail: () => {

					}
				})
			},
			// 自定义设置日期按钮
			setTime() {
				if (this.input == '')
					return uni.showToast({
						icon: 'none',
						title: "请填写序列号！"
					})
				this.$refs.databox.show()
			},
			changeTime(time) {
				console.log(time,'time')
				this.date_data.data = time
				console.log(this.date_data.data,'date')
				this.getCode_fun()
			},
			// 查询日期事件
			getData_fun() {
				if (this.btn_stats.get_list) {
					return
				}
				if (this.input.length == 0) {
					return uni.showToast({
						icon: 'none',
						title: "请填写序列号！"
					})
				}
				uni.showLoading({
					title: '请求数据...'
				});
				this.btn_stats.get_list = true
				const then = this
				const urlPath = "device/searchByMachineCode";
				const data = {
					deviceId: this.input,
					token: uni.getStorageSync("token")
				}
				// 请求
				uni.request({
					method: 'POST',
					url: this.$serverURL + urlPath,
					// url: 'http://api.bingce.com:8091/device/searchByMachineCode',
					// url: 'https://api.bingce.com:8091/device/searchByMachineCode',
					// url: 'http://api.bingce.com:8091/device/searchByMachineCode',
					data: data,
					header: {},
					success: (res) => {
						console.log(res)
						let result = res.data.result
						let str = res.data.describe
						if (result == 0) {
							this.count = res.data.items;
							// 提示 更新成功
							uni.showToast({
								title: "最新激活码更新成功"
							})
						} else if (str == '') {
							// 提示 更新成功
							uni.showToast({
								icon: 'none',
								title: "未知错误，请稍后重试"
							})
						} else if (result == 1) {
							// 跳转 login
							uni.navigateTo({
								url: "../index/index"
							})
							// 提示 token 过期
							return uni.showToast({
								icon: 'none',
								title: "token 已过期，请重新登录"
							})
						} else {
							return uni.showToast({
								icon: 'none',
								title: str
							})
						}
						// switch (res.data.result) {
						// 	case 1:
						// 		// 跳转 login
						// 		uni.navigateTo({
						// 			url: "../index/index"
						// 		})
						// 		// 提示 token 过期
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			title: "token 已过期，请重新登录"
						// 		})
						// 		break;
						// 	case 101:
						// 		// 没有用户
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			title: "没有用户"
						// 		})
						// 		break;
						// 	case 102:
						// 		// 用户权限不足
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			title: "用户权限不足"
						// 		})
						// 		break;
						// 	case 103:
						// 		// 用户已经存在
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			title: "用户已经存在"
						// 		})
						// 		break;
						// 	case 104:
						// 		// 用户不存在
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			title: "用户不存在"
						// 		})
						// 		break;
						// 	case 203:
						// 		// 用户不存在
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			duration: 4000,
						// 			title: "与金蝶服务器通信发生错误，无法查询订单信息"
						// 		})
						// 		break;
						// 	case 204:
						// 		// 用户不存在
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			title: "不具备生成相应设备激活码的权限"
						// 		})
						// 		break;
						// 	case 0:
						// 		this.count = res.data.items;
						// 		// 提示 更新成功
						// 		uni.showToast({
						// 			title: "最新激活码更新成功"
						// 		})
						// 		break;
						// 	default:
						// 		this.count = res.data.items;
						// 		// 提示 更新成功
						// 		uni.showToast({
						// 			icon: 'none',
						// 			title: "未知错误，请稍后重试"
						// 		})
						// }
					},
					fail(res) {
						// console.log(res)
						uni.showToast({
							title: '请求失败',
							icon: 'none',
							duration: 2000
						});
					},
					complete(res) {
						setTimeout(() => {
							then.btn_stats.get_list = false
						}, 1000)
					}
				})
			},
			// 生成激活码事件
			getCode_fun(index = null) {
				if (this.btn_stats.get_code) {
					return
				}
				uni.showLoading({
					title: '请求数据...'
				});
				this.btn_stats.get_code = true
				const then = this
				const urlPath = "device/generatorActivationCode";
				let data
				if (index != null) {
					data = {
						itemKey: this.count[index].key,
						token: uni.getStorageSync("token")
					};
				} else {
					data = {
						deviceId: this.input,
						dateString: this.date_data.data,
						token: uni.getStorageSync("token")
					};
				}
				// 请求
				uni.request({
					method: 'POST',
					url: this.$serverURL + urlPath,
					// url: 'http://api.bingce.com:8091/device/generatorActivationCode',
					// url: 'https://api.bingce.com:8091/device/generatorActivationCode',
					// url: 'http://api.bingce.com:8091/device/generatorActivationCode',
					data: data,
					header: {},
					success: (res) => {
						// console.log(res)
						let result = res.data.result
						let str = res.data.describe
						// console.log(str)
						if (result == 1) {
							// 跳转 login
							uni.navigateTo({
								url: "../index/index"
							})
							// 提示 token 过期
							return uni.showToast({
								icon: 'none',
								title: "token 已过期，请重新登录"
							})
						} else if (result == 0) {
							uni.showToast({
								title: "生成激活码成功"
							})
							uni.navigateTo({
								url: `../code/code?code=${res.data.activationCode}&serial_number=${this.input}&back_btn_state=${true}&dateString=${res.data.dateString}`
								// url: 'pages/code/code?code=' + this.code
							})
						} else {
							return uni.showToast({
								icon: 'none',
								title: str
							})
						}
						// switch (res.data.result) {
						// 	case 1:
						// 		// 跳转 login
						// 		uni.navigateTo({
						// 			url: "../index/index"
						// 		})
						// 		// 提示 token 过期
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			title: "token 已过期，请重新登录"
						// 		})
						// 		break
						// 	case 301:
						// 		// 生成激活码失败
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			title: "生成激活码失败"
						// 		})
						// 		break
						// 	case 201:
						// 		// 没有查询到相应机器
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			title: "没有查询到相应机器"
						// 		})
						// 		break
						// 	case 202:
						// 		// 过了账期
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			title: "账期已过"
						// 		})
						// 		break
						// 	case 203:
						// 		// 金蝶未响应
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			title: "金蝶未响应"
						// 		})
						// 		break
						// 	case 204:
						// 		// 不具备生成相应设备激活码的权限
						// 		return uni.showToast({
						// 			icon: 'none',
						// 			title: "不具备生成相应设备激活码的"
						// 		})
						// 		break
						// }
						// 展示 code
						// this.code = res.data.activationCode;
						// 展示 二维码 code
						// this.qr = Qr.createQrCodeImg(this.code)
						// 提示 更新成功
						uni.showToast({
							title: "生成激活码成功"
						})
						// console.log(res.data)
						console.log('跳转')
						uni.navigateTo({
							url: `../code/code?code=${res.data.activationCode}&serial_number=${this.input}&back_btn_state=${true}&dateString=${res.data.dateString}`
							// url: 'pages/code/code?code=' + this.code
						})
					},
					fail(res) {
						// console.log(res)
						uni.showToast({
							title: '请求失败',
							icon: 'none',
							duration: 2000
						});
					},
					complete(res) {
						setTimeout(() => {
							then.btn_stats.get_code = false
						}, 1000)
					}
				})
			},
			onShareAppMessage: function(e) {
				let title = '阿尔法激活码'
				return {
					title: title,
					path: 'pages/index/index'
				}
			},
			forgot_password_fun() {
				// 跳转 query
				uni.navigateTo({
					url: "../forgot_password/forgot_password"
				})
			}
		},
		mounted() {},
	}
</script>

<style>
	.query_box {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		padding: 0 50px;
	}

	.query_list_pc {
		height: 20%;
		padding: 40%;
		padding-top: 2%;
	}

	.query_list_m {
		/* height: 300rpx;
		padding-top: 1%; */
		padding: 20rpx 50rpx;
	}

	.get_code {
		border-top: 1px solid #ccc;
		border-radius: 5%;
		height: 80%;
		padding: 0 10%;
	}

	.column_flex_center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		padding-top: 80rpx;
		font-size: 30rpx;
	}

	.back_btn {
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.infinite-list {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding: 0;
		list-style-type: none;
	}

	.infinite-list-item_pc {
		height: 220px;
		flex: 1;
		background: #e8f3fe;
		line-height: 220px;
		margin: 5px;
		transition: 0.1s;
	}

	.infinite-list-item_m {
		height: 30%;
		width: 43%;
		background: #e8f3fe;
		line-height: 250rpx;
		margin: 5px;
		transition: 0.1s;
	}

	.add image {
		vertical-align: middle;
	}


	.center_box {
		height: 60%;
		margin: 10% 0;
	}

	.center_box_m {
		height: 100%;
		margin: 0% 0;
	}

	.cxrq_btn button {
		width: 90%;
	}

	.text_title {
		font-size: 20px;
		font-weight: 600;
	}

	.code_str {
		display: block;
		margin: 0 auto;
		word-break: break-all;
		user-select: all;
	}

	.forgot_password_box {
		position: absolute;
		bottom: 10rpx;
		right: 30rpx;
		height: 50rpx
	}

	.forgot_password_box .forgot_password {
		/* position: absolute; */
		/* right: 25rpx; */
		font-size: 30rpx;
		color: #007AFF;
		line-height: 50rpx;
	}

	.input_class {
		display: flex;
		justify-content: center;
		position: relative;
		margin: 25rpx 0 !important;
	}

	.input_class input {
		display: inline-block;
		position: relative;
		font-size: 39rpx !important;
		width: 400rpx;
		max-width: 400rpx;
	}

	.scanCode {
		position: absolute;
		right: 45rpx;
		top: 10rpx;
		bottom: 0rpx;
		background: #fff;
		width: 50rpx;
		height: 50rpx;
	}
</style>
